<template>
  <div>
    <el-alert
      title="最多可以上传 5 张图片，作为首页轮播 banner 图，图片上传成功之后，下方可以选择点击轮播图要跳转到的页面"
      type="info"
      :closable="false"
      class="alert"
    />
    <Upload
      :originFileList="bannerList"
      :limit="5"
      fileType="banner"
      :onChange="(value: any) => {
        disbaledBtn = false
        bannerList = value
      }"
    />
    <div style="display: flex;">
      <div v-for="(_, index) in bannerList" class="jump-target-class">
        <el-select v-model="jumpTarget[index]" style="width: 240px">
          <el-option
            v-for="item in jumpTargetOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <el-button type="primary" :disabled="disbaledBtn" @click="handleSave" class="save-btn">保存</el-button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Upload from "../../shop/components/Upload.vue";
import { getBannerList, saveBannerList } from "@/api/base";
import { getSuffix, getUrl } from "@/views/shop/product/utils";

const bannerList = ref<any[]>([]);
const disbaledBtn = ref(false)

const jumpTarget = ref<any[]>([])
const jumpTargetOptions = [
  {
    value: '/pagesHome/shop/index',
    label: '甄选',
  },
  {
    value: '/pagesHome/activity/index?activeIndex=1',
    label: '活动'
  },
  {
    value: '/pagesHome/group/index',
    label: '搭子'
  },
  {
    value: '/pages/club/club',
    label: '俱乐部'
  },
  {
    value: '/pages/site/site',
    label: '场地'
  },
  {
    value: '/pagesHome/activity/index',
    label: '赛事'
  },
  {
    value: '/pagesMember/integral/integral',
    label: '积分充值'
  }
]

const fetchList = async () => {
  const { data } = await getBannerList()
  bannerList.value = Array.isArray(data) ? data.map((item: any, index: number) => ({
    name: `商品轮播图${index + 1}.${getSuffix(item.bannerUrl)}`,
    url: item.bannerUrl
  })) : []
  jumpTarget.value = Array.isArray(data) ? data.map((item: any) => item.jumpTarget) : []
}
fetchList()

const handleSave = async () => {
  try {
    const bannerUrlList = bannerList.value.map((file:any, index: number) => {
      return {
        bannerUrl: getUrl(file),
        jumpTarget: jumpTarget.value[index]
      }
    })
    await saveBannerList(bannerUrlList)
    ElMessage.success("保存成功");
  } catch(err) {
    console.log("🚀 ~ handleSave ~ err:", err)
  }
}
</script>
<style lang="scss" scoped>
.alert {
  margin-bottom: 20px;
}
.save-btn {
  margin-top: 20px;
}
.jump-target-class {
  ::v-deep(.el-select) {
    width: 146px !important;
    margin-right: 10px;
  }
}
</style>
